<template>
	<common-page title="找回密码">
		<el-steps :active="stepActive" simple finish-status="success">
		    <el-step title="填写邮件" />
		    <el-step title="发送邮件" />
		</el-steps>
		<el-form v-if="stepActive==0" ref="form" :model="form" :rules="rules" :label-width="120">
			<el-form-item label="账号邮件" prop="email">
				<el-input v-model="form.email" placeholder="请输入账号关联邮件"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="save">提交</el-button>
			</el-form-item>
		</el-form>
		<el-result v-if="stepActive==1" icon="success" title="邮件已发送" sub-title="请到您的邮件中查看并重置新密码">
			<template #extra>
				<el-button type="primary" @click="backLogin">返回登录</el-button>
			</template>
		</el-result>
	</common-page>
</template>

<script>
	import commonPage from './components/commonPage'
	import {verifyEmail} from "@/utils/verificate";

	export default {
		components: {
			commonPage
		},
		data() {
			return {
				stepActive: 0,
				form: {
					email: ""
				},
				rules: {
					email: [
						{required: true, message: '请输入您的登录账号绑定的邮件', trigger: 'blur'},
						{validator: verifyEmail, trigger: 'blur'}
					],
				},
				disabled: false,
				time: 0
			}
		},
		mounted() {
		},
		methods: {
			save(){
				this.$refs.form.validate((valid) => {
					if (valid) {
						this.$API.system.getMyPassword.post(this.form);
						this.stepActive = 1
					}else {
						return false;
					}
				})
			},
			backLogin(){
				this.$router.push({
					path: '/login'
				})
			}
		}
	}
</script>

<style scoped>


</style>
